<template>
  <view class="imageDetail">
    <view class="user_wrap">
      <view class="user_avata">
        <image
          src="http://img0.adesk.com/download/5c94c22831f6136a1c2b5d9e"
          mode="widthFix"
        ></image>
      </view>
      <view class="user_info">
        <view class="user_name">{{imageDetail.user.name}}</view>
        <view class="atime">{{imageDetail.cnTime}}</view>
      </view>
    </view>
    <view class="image_wrap">
      <swiper-action @swiperAction="handleSwiperAction">
        <image
          :src="imageDetail.thumb"
          mode="widthFix"
        ></image>
      </swiper-action>

      <!-- :src="item.thumb+item.rule.replace('$<Height>','360')" -->

    </view>
    <view class="good_like">
      <view class="good"><i
          class="iconfont icondianzan"
          style="margin-right:20rpx;"
        ></i> {{imageDetail.rank}}</view>
      <view class="like">
        <i
          class="iconfont iconshoucang"
          style="margin-right:20rpx;"
        ></i>收藏</view>
    </view>
    <view
      class="download_wrap"
      @click="handleDownload"
    >
      <view class="down_btn"> 下载图片</view>
    </view>
  </view>
</template>

<script>
import swiperAction from '@/components/swiperAction'
import moment from 'moment'
// 设置moment的语言为中文
moment.locale("zh-cn")
export default {
  components: {
    swiperAction
  },
  data () {
    return {
      // 图片的详情
      imageDetail: {},
      imgIndex: 0
    }
  },
  onLoad (options) {
    const { imgIndex } = getApp().globalData
    this.imgIndex = imgIndex
    this.getData()
  },
  methods: {
    getData () {
      const { imgList } = getApp().globalData

      this.imageDetail = imgList[this.imgIndex]
      this.imageDetail.newthumb = this.imageDetail.thumb + this.imageDetail.rule.replace('$<Height>', '360')
      this.imageDetail.cnTime = moment(this.imageDetail.atime * 1000).fromNow()
      // 获取评论的接口已经挂了
      // this.getComment()

    },
    getComment () {
      this.$request({
        url: `/image/v2/wallpaper/wallpaper/${this.imageDetail.id}/comment`
      }).then(res => {
        console.log(res);
      })
    },
    // 触发滑动事件
    handleSwiperAction (e) {
      /*
      基本步骤如下：
      1. left:imgIndex++
      2. right: imgIndex--
      3. 判断 数组是否越界问题
      4. 左滑的条件：e.direction==='left' && this.imgIndex<imgList.length-1【当索引小于长度时才能滑动】
      5. 右滑的条件：e.direction==='right' && this.imgIndex>0【当索引大于0才能滑动】
      */
      const { imgList } = getApp().globalData
      if (e.direction === 'left' && this.imgIndex < imgList.length - 1) {
        // 左滑，加载下一页
        this.imgIndex++
        this.getData()
      }
      else if (e.direction === 'right' && this.imgIndex > 0) {
        // 右滑，加载上一页
        this.imgIndex--
        this.getData()
      }
      else {
        uni.showToast({
          title: '没有数据了',
          icon: 'none'
        })
      }
    },
    // 点击下载文件的按钮
    async handleDownload () {
      // 将远程文件下载到小程序内存中，temFilePath
      const result = await uni.downloadFile({ url: this.imageDetail.img })
      const { tempFilePath } = result[1]
      // 将小程序内存中的文件下载到本地上
      // 添加加载中的动画
      uni.showLoading({ title: '加载中' })
      const result1 = await uni.saveImageToPhotosAlbum({ filePath: tempFilePath })
      // 提示用户下载成功，并关闭加载中的动画
      uni.hideLoading()
      uni.showToast({
        title: '下载成功',
        icon: 'success'
      })
    }

  }
}
</script>

<style lang="scss" scope>
.imageDetail {
  .user_wrap {
    display: flex;
    justify-content: start;
    align-items: center;
    margin: 30rpx 0;
    padding: 0 20rpx;
    .user_avata {
      width: 70rpx;
      border-radius: 70rpx;
      overflow: hidden;
      margin-right: 20rpx;
      image {
        width: 100%;
      }
    }

    .user_info {
      .user_name {
        font-size: 35rpx;
        font-weight: 700;
      }

      .atime {
        color: #cccccc;
      }
    }
  }

  .image_wrap {
    width: 100%;
    padding: 0 52rpx;
    image {
      width: 100%;
    }
  }
  .good_like {
    display: flex;
    align-items: center;
    height: 80rpx;
    border-bottom: 1px solid #eeeeee;
    .good {
      flex: 1;
      text-align: center;
      border-right: 1px solid #eeeeee;
      display: flex;
      justify-content: center;
    }
    .like {
      text-align: center;
      flex: 1;
      display: flex;
      justify-content: center;
    }
  }
  .download_wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    .down_btn {
      width: 90%;
      height: 70rpx;
      background-color: $color;
      font-size: 35rpx;
      font-weight: 700;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10rpx;
      // margin: 0 20rpx;
    }
  }
}
</style>